
<!-- 下采购单添加商品 -->
<template>
  <div class="choose-goods">  
    <!-- <div class="filter-top"> 
        <div class="search-box">
            <search v-model="searchText"
                @on-submit="onSubmit"
                position= "relative"
                placeholder="请输入商品名"
                ref="search">
            </search>    
        </div>  
    </div> -->
    <!--类型选择-->
    <div class="top-scroll-box">
      <div scroll-x="true"  class="top-scroll">
        <div class="scroll-content-box">
          <div :class="['type-item',typeCurrent == index ? 'active-type' : '']" v-for="(item,index) in typeList" :key="index" @click="chooseType(index)">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>

    <div class="goods-box">
      <div class="goods-list" v-for="(item,index) in goodsList" :key="index" @click="chooseThis(index)">
          <div class="shop-item-left">
              <div :class="['check-box',item.isChecked?'active-check':'']">
                  <div class="check-circle" v-if="item.isChecked"></div>
              </div>
          </div>
          <div class="goods-left">
              <img :src="item.poster" alt="" class="goods-img">
          </div>
          <div class="goods-right">
              <div class="goods-name">{{item.goodsName}}</div>
              <div class="goods-price"><span>单价:</span>￥{{item.supplyBoxprice}}/箱</div>
              <!-- <div class="goods-num"><span>规格</span>{{item.specification}}</div> -->
              <div class="goods-num" v-if="item.stock"><span>库存</span>{{item.stock}}</div>
          </div>
      </div>
      <nodata v-if="!goodsList || goodsList.length == 0" />
    </div>
    <div class="height120"></div>
    <div class="addbtn isbtn" @click="submit()">选好了</div>
    
  </div>
</template>
<script> 
import api from '@/api/api.js' 
import { Search } from 'vux'
import { Message } from 'element-ui'
import nodata from '@/components/nodata'
export default { 
  components: { 
    Search,
    nodata
  },
  data () {
    return {
      typeList:[],
      searchText:'',
      goodsList:[
         
      ], 
      multiplay:true, //多选or 单选
    }
  },
  mounted () {
    this.getTypeList(); 
  },
  filters: {
     
  },
  methods: {
    getTypeList(){
      api.stockMng.getCategory({ },res=>{ 
        let goodsArr = this.$store.state.checkGoods;
        for(var i=0;i<goodsArr.length;i++){
          for(var k=0;k<res.result.length;k++){
            for(var j=0;j<res.result[k].goodsList.length;j++){
              if(goodsArr[i].goodsId == res.result[k].goodsList[j].goodsId){
                res.result[k].goodsList[j] = goodsArr[i];
                res.result[k].goodsList[j].isChecked = true;
              }
            }
          }
        }
        this.typeList = res.result;
        this.typeCurrent=0; 
        this.goodsList =  this.typeList[this.typeCurrent].goodsList;
      })
    },
    onSubmit(val){

    },
    chooseType(idx){
      this.typeCurrent=idx;
      this.goodsList =  this.typeList[idx].goodsList;
    },
    chooseThis(index){
      if(!this.goodsList[index].stock){
        api.stockMng.getGoodsStock({ 
          warehouseName:this.$route.query.warehouseName,
          goodsCode:this.goodsList[index].goodsCode
        },res=>{
          this.$set(this.goodsList[index],"stock", String(res.result.stock) );
          if(res.result.stock == 0){
            return Message({
              message: "该商品库存为0,请选择其他商品",
              type: 'warning',
              duration: 1.5 * 1000
            }) 
          }else{
            this.$set(this.goodsList[index],"isChecked",!this.goodsList[index].isChecked)
          }
          
        })
      }else{
         if(this.goodsList[index].stock == 0){
            return Message({
              message: "该商品库存为0,请选择其他商品",
              type: 'warning',
              duration: 1.5 * 1000
            }) 
          }else{
            this.$set(this.goodsList[index],"isChecked",!this.goodsList[index].isChecked)
          }
      }
    },
    submit(){
      let arr=[];
      // this.goodsList.forEach(item=>{
      //   if(item.isChecked){
      //     arr.push(item)
      //   }
      // })
      for(var k=0;k<this.typeList.length;k++){
        for(var j=0;j<this.typeList[k].goodsList.length;j++){
          if(this.typeList[k].goodsList[j].isChecked){
            arr.push(this.typeList[k].goodsList[j])
          }
        }
      }
      if(arr.length==0){
        return  Message({
          message: "请选择商品！",
          type: 'error',
          duration: 3 * 1000
        }) 
      }
      this.$store.commit("setCheckGoods",arr);
      this.$router.go(-1)
    },

  }
}
</script>
<style lang="less" scoped>
.height120{
  height: 60px;
}
.addbtn{
    text-align: center;
    line-height: 50px;
    background: #FABE00;
    color: #fff;
    height: 50px;
    font-size: 16px;
    letter-spacing: 4px;
    position: fixed;
    width: 7.5rem;
    bottom: 0;
    left: 0;
}
.shop-item-left{
    padding: 0 .24rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .check-box{
        display: flex;
        justify-content: center;
        align-items: center;
        width: .38rem;
        height: .38rem;
        border-radius: 50%;
        border: 1px solid #e1e1e1;
        .check-circle{
            width: .18rem;
            height: .18rem;
            border-radius: 50%;
            background: #FABE00;
        }
    }
}
.top-scroll-box{
  background-color: #fbfbfb;

}
.top-scroll{ 
  height: .90rem;
  width: 100%;
  border-top: 1px solid #e1e1e1;
  display: flex;
  overflow-x: auto;
}
.type-item{
		height: .90rem;
		line-height: .90rem;
		padding: 0 .20rem;
		font-size: .28rem;
		font-weight: bold;
		color: #999;
		white-space: nowrap;
		position: relative;
	}
	.active-type{
		font-weight: 600;
		color: #333333;	 
	}
	.active-type::before{
		content: '';
		position: absolute; 
		height: .08rem;
		background: linear-gradient(218deg, #FFB600 0%, #FB3030 100%);
		border-radius: .04rem;
    width: 30%;
    left: 35%;
		bottom: 0;
  }
.scroll-content-box{
  height: .90rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 .20rem;
}
.choose-goods{
    // padding-top: 20px;
}
.filter-top{
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    border-bottom: 1px solid #eee;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 3;
    .isclick{
        border-width: 0 1px 1px 0;
        margin-top: -6px;
    }
}
    
.goods-list{
    display: flex;
    padding: .20rem 0;
    position: relative;
    &::before{
        position: absolute;
        bottom: 0;
        content: '';
        left: 0;
        right: -20px;
        height: 1px;
        background: #f5f5f5;
    }
}

.goods-img{
    width: 1.48rem;
    height: 1.48rem;
    border-radius: .12rem;
    background: #ddd;
}
.goods-name{
    font-size: .30rem;
    font-weight: bold;
    line-height: .34rem;
}
.goods-price,.goods-num{
    
    font-size: .24rem;
    & span{
        margin-right: .12rem;
        color: #999;
    }
}
.goods-right{
    width: 1.48rem;
    height: 1.48rem;
    flex: 1;
    padding-left: .20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/deep/.weui-search-bar__label{
  top: 3px;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.search-box{
    width: 90%;
}
.active-check{
    border-color: #FABE00 !important;
}
</style>